<template>
  <div class="centeet">
    <div class="cardHeader">
      <img class="cardHeader_icon m_hoverCP" src="../../assets/img/img28.png" alt="" @click="onBack"/>
      <span class="m_hoverCP" @click="onBack">{{$t('message.Return')}}</span>
    </div>
    <div class="top">
      <a-spin :spinning="loading">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" forceRender>
          <span slot="tab">{{$t('message.by_year')}}</span>
          <a-table size="middle" :columns="columns" :data-source="dataSourceOne" bordered :pagination="false">
            <template slot="data1" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a-input-number :step="0.0001" :precision="4" v-model="record.data1" style="width: 100%;"
                         @change="onInputChange($event, record, 1)"/>
              </div>
            </template>
            <template slot="filePath" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a @click="() => saveUpload(record, index)" v-if="record.files.length > 0">{{$t('message.view_attachments')}}</a>
                <a @click="() => saveUpload(record, index)" v-else>{{$t('message.upload_attachment')}}</a>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" forceRender>
          <span slot="tab">{{$t('message.by_quarterly')}}</span>
          <a-table size="middle" :columns="columns1" :data-source="dataSourceTwo" bordered :pagination="false">
            <template v-for="(col, ide) in 4" :slot="'data' + (ide + 2)" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a-input-number :step="0.0001" :precision="4" v-model="record['data' + (ide + 2)]" style="width: 100%;"
                         @change="onInputChange($event, record, 2)"/>
              </div>
            </template>
            <template slot="filePath" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a @click="() => saveUpload(record, index)" v-if="record.files.length > 0">{{$t('message.view_attachments')}}</a>
                <a @click="() => saveUpload(record, index)" v-else>{{$t('message.upload_attachment')}}</a>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" forceRender>
          <span slot="tab">
            {{$t('message.by_month')}}
             <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{$t('message.fill_in_the_annual_data')}}</span>
                </template>
                <a-icon type="question-circle"/>
              </a-tooltip>
          </span>
          <a-table size="middle" :columns="columns2" :data-source="dataSourceThree" bordered :pagination="false">
            <template v-for="(col, ide) in 12" :slot="'data' + (ide + 6)" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a-input-number :step="0.0001" :precision="4" v-model="record['data' + (ide + 6)]" style="width: 100%;"
                         @change="onInputChange($event, record, 3)"/>
              </div>
            </template>
            <template slot="filePath" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a @click="() => saveUpload(record, index)" v-if="record.files.length > 0">{{$t('message.view_attachments')}}</a>
                <a @click="() => saveUpload(record, index)" v-else>{{$t('message.upload_attachment')}}</a>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
        <div slot="tabBarExtraContent" class="flex">
          <!-- <a-button @click="" class="xinzeng"> <img src="@/assets/carbon/img7.png" alt="" /> 批量导入</a-button > -->
          <a-button @click="handleAdd" class="leftChaxun" slot="tabBarExtraContent">{{$t('message.Save')}}</a-button>
        </div>
      </a-tabs>

      </a-spin>
    </div>
    <a-drawer :title="$t('message.Upload')" width="520" :closable="false" :visible="visible" @close="onClose">
      <j-upload v-model="fileData" :number="10" v-if="visible"></j-upload>
      <div class="drawerOptionBox">
        <a-button style="margin-right: 8px" @click="onClose"> {{$t('message.Cancel')}}</a-button>
        <a-button type="primary" @click="onSubmitUpond"> {{$t('message.Confirm')}}</a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import {getAction, postAction, deleteAction} from "@api/manage";

export default {
  name: "rapidFilling",
  props: {
    examineId: {
      type: String,
      default: "",
    },
  },
  computed: {
  },
  data() {
    return {
      loading:false,
      dataSourceOne: [],
      dataSourceTwo: [],
      dataSourceThree: [],
      fileData:'', //
      visible: false,
      columns: [
        {
          title: this.$t('message.facilities_activities'),
          dataIndex: "emissionSourceName",
          align: "center",
        },
        {
          title: this.$t('message.Active_data_unit'),
          align: "center",
          dataIndex: "dataUnitText",
        },
        {
          title: this.$t('message.annual_value'),
          dataIndex: "data1",
          align: "center",
          width: "25%",
          scopedSlots: {customRender: "data1"},
        },
      ],
      columns1: [
        {
          title: this.$t('message.facilities_activities'),
          dataIndex: "emissionSourceName",
          align: "center",
        },
        {
          title: this.$t('message.Active_data_unit'),
          dataIndex: "dataUnitText",
          align: "center",
        },
        {
          title: `${this.$t('message.quarter')} 1`,
          dataIndex: "data2",
          align: "center",
          scopedSlots: {customRender: "data2"},
        },
        {
          title: `${this.$t('message.quarter')} 2`,
          dataIndex: "data3",
          align: "center",
          scopedSlots: {customRender: "data3"},
        },
        {
          title: `${this.$t('message.quarter')} 3`,
          dataIndex: "data4",
          scopedSlots: {customRender: "data4"},
          align: "center",
        },
        {
          title: `${this.$t('message.quarter')} 4`,
          dataIndex: "data5",
          scopedSlots: {customRender: "data5"},
          align: "center",
        },
      ],
      columns2: [
        {
          title: this.$t('message.facilities_activities'),
          dataIndex: "emissionSourceName",
          align: "center",
        },
        {
          title: this.$t('message.Active_data_unit'),
          dataIndex: "dataUnitText",
          align: "center",
        },
        {
          title: '1'+this.$t('message.month'),
          dataIndex: "data6",
          scopedSlots: {customRender: "data6"},
          align: "center",
        },
        {
          title: '2'+this.$t('message.month'),
          scopedSlots: {customRender: "data7"},
          dataIndex: "data7",
          align: "center",
        },
        {
          title: '3'+this.$t('message.month'),
          scopedSlots: {customRender: "data8"},
          dataIndex: "data8",
          align: "center",
        },
        {
          title: '4'+this.$t('message.month'),
          dataIndex: "data9",
          scopedSlots: {customRender: "data9"},
          align: "center",
        },
        {
          title: '5'+this.$t('message.month'),
          scopedSlots: {customRender: "data10"},
          dataIndex: "data10",
          align: "center",
        },
        {
          title: '6'+this.$t('message.month'),
          scopedSlots: {customRender: "data11"},
          dataIndex: "data11",
          align: "center",
        },
        {
          title: '7'+this.$t('message.month'),
          scopedSlots: {customRender: "data12"},
          dataIndex: "data12",
          align: "center",
        },
        {
          title: '8'+this.$t('message.month'),
          scopedSlots: {customRender: "data13"},
          dataIndex: "data13",
          align: "center",
        },
        {
          title: '9'+this.$t('message.month'),
          scopedSlots: {customRender: "data14"},
          dataIndex: "data14",
          align: "center",
        },
        {
          title: '10'+this.$t('message.month'),
          scopedSlots: {customRender: "data15"},
          dataIndex: "data15",
          align: "center",
        },
        {
          title: '11'+this.$t('message.month'),
          scopedSlots: {customRender: "data16"},
          dataIndex: "data16",
          align: "center",
        },
        {
          title: '12'+this.$t('message.month'),
          scopedSlots: {customRender: "data17"},
          dataIndex: "data17",
          align: "center",
        }
      ],
      provinceData: [],
      typeData: [],
      recodeId: "",
      index: 0,
    };
  },
  created() {
    setTimeout(() => {
      this.changeCheckTemplateId();
    }, 600);
  },
  mounted() {
  },
  methods: {
    onBack() {
      this.$emit("onRapoidBack");
    },
    /**
     * 上传附件、查看附件
     * @param value
     * @param index
     */
    saveUpload(value, index) {
      console.log(value, index);
      this.fileData = '';
      if (value.files.length > 0) {
        let arr = []
        value.files.forEach((res, index) => {
          let data1 = res.path.split('/')
          arr.push('temp/' + data1[data1.length - 1]);
        });
        this.fileData = arr.join(',')
      }
      this.visible = true;
      this.index = index;
    },
    /**
     * 数据计算
     */
    onInputChange(e, value, type) {
      this.recodeId = value.detailId;
      if (type == 1) {
        let index = this.dataSourceTwo.findIndex((item) => item.detailId == this.recodeId);
        let index1 = this.dataSourceThree.findIndex((item) => item.detailId == this.recodeId);
        let numbers1 = ((e * 1) / 4).toFixed(4);
        let numbers2 = ((e * 1) / 12).toFixed(4);
        console.log(numbers1);
        console.log(numbers2);
        this.dataSourceTwo[index].data2 = numbers1;
        this.dataSourceTwo[index].data3 = numbers1;
        this.dataSourceTwo[index].data4 = numbers1;
        this.dataSourceTwo[index].data5 = numbers1;
        for (var i = 6; i < 18; i++) {
          console.log(i);
          this.dataSourceThree[index1]["data" + i] = numbers2;
        }
      } else if (type == 2) {
        let index = this.dataSourceOne.findIndex((item) => item.detailId == this.recodeId);
        let index1 = this.dataSourceThree.findIndex((item) => item.detailId == this.recodeId);
        let numbers =
            (value.data2 ? value.data2 * 1 : 0) +
            (value.data3 ? value.data3 * 1 : 0) +
            (value.data4 ? value.data4 * 1 : 0) +
            (value.data5 ? value.data5 * 1 : 0);
        this.dataSourceOne[index].data1 = numbers;

        if (value.data2) {
          let numbers2 = (value.data2 / 3).toFixed(4);
          for (var i = 6; i < 9; i++) {
            this.dataSourceThree[index1]["data" + i] = numbers2;
          }
        }
        if (value.data3) {
          let numbers2 = (value.data3 / 3).toFixed(4);
          for (var i = 9; i < 12; i++) {
            this.dataSourceThree[index1]["data" + i] = numbers2;
          }
        }
        if (value.data4) {
          let numbers2 = (value.data4 / 3).toFixed(4);
          for (var i = 12; i < 15; i++) {
            this.dataSourceThree[index1]["data" + i] = numbers2;
          }
        }
        if (value.data5) {
          let numbers2 = (value.data5 / 3).toFixed(4);
          for (var i = 15; i < 18; i++) {
            this.dataSourceThree[index1]["data" + i] = numbers2;
          }
        }
      } else {
        let index = this.dataSourceOne.findIndex((item) => item.detailId == this.recodeId);
        let index1 = this.dataSourceTwo.findIndex((item) => item.detailId == this.recodeId);
        let numbers = 0;
        for (var i = 5; i < 18; i++) {
          numbers += this.dataSourceThree[index1]["data" + i] ? this.dataSourceThree[index1]["data" + i] * 1 : 0;
        }
        console.log(numbers);
        this.dataSourceOne[index].data1 = numbers;
        let numbers2 = 0;
        for (var i = 6; i < 9; i++) {
          numbers2 += this.dataSourceThree[index1]["data" + i] ? this.dataSourceThree[index1]["data" + i] * 1 : 0;
        }
        this.dataSourceTwo[index1].data2 = numbers2;
        let numbers3 = 0;
        for (var i = 9; i < 12; i++) {
          numbers3 += this.dataSourceThree[index1]["data" + i] ? this.dataSourceThree[index1]["data" + i] * 1 : 0;
        }
        this.dataSourceTwo[index1].data3 = numbers3;
        let numbers4 = 0;
        for (var i = 12; i < 15; i++) {
          numbers4 += this.dataSourceThree[index1]["data" + i] ? this.dataSourceThree[index1]["data" + i] * 1 : 0;
        }
        this.dataSourceTwo[index1].data4 = numbers4;
        let numbers5 = 0;
        for (var i = 15; i < 18; i++) {
          numbers5 += this.dataSourceThree[index1]["data" + i] ? this.dataSourceThree[index1]["data" + i] * 1 : 0;
        }
        this.dataSourceTwo[index1].data5 = numbers5;
      }
    },
    /**
     * 获取数据
     */
    changeCheckTemplateId() {
      this.loading = true
      getAction("/orgCarbonCheckQuick/getByCheckId", {
        checkId: this.examineId,
      }).then((res) => {
        if (res.success) {
          this.typeData = res.result;
          for (let index = 0; index < this.typeData.typeData.length; index++) {
            const item = this.typeData.typeData[index];
            if (item.type == 1) {
              this.dataSourceOne = item.data;
            } else if (item.type == 2) {
              this.dataSourceTwo = item.data;
            } else if (item.type == 3) {
              this.dataSourceThree = item.data;
            }
          }
        }
      }).finally(() => {
        this.loading = false
      });
    },
    /**
     * 上传弹窗-确定
     */
    onSubmitUpond() {
      console.log('onSubmitUpond', this.fileData);
      if(this.fileData){
        let arr = this.fileData.split(',');
        arr.forEach((item) => {
          this.dataSourceOne[this.index].files.push({
            path: item,
          });
          this.dataSourceTwo[this.index].files.push({
            path: item,
          });
          this.dataSourceThree[this.index].files.push({
            path: item,
          });
        });
        this.fileData = []
      }
      this.visible = false;
    },
    //打开抽屉
    handleAdd() {
      let arr = [];
      arr.push({
        data: this.dataSourceOne,
        type: 1,
      });
      arr.push({
        data: this.dataSourceTwo,
        type: 2,
      });
      arr.push({
        data: this.dataSourceThree,
        type: 3,
      });
      this.loading = true
      postAction("/orgCarbonCheckQuick/addFromCarbonCheckNew", {
        checkId: this.typeData.checkId,
        mainStandardId: this.typeData.mainStandardId,
        typeData: arr,
      }).then((res) => {
        if (res.success) {
          this.$emit("onRapoidBack");
        }
      }).finally(()=>{
        this.loading = false
      });
    },
    //关闭
    onClose() {
      this.visible = false;
    },
  },
};
</script>


<style>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>


<style lang="less" scoped>


.drawerOptionBox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}

.flex {
  display: flex;
  align-items: center;
  gap: 24px;
}

.xinzeng {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #148958;
  font-weight: 400;
  font-size: 14px;
  color: #148958;
  padding: 5px 16px;
  background: #ffffff;
  display: flex;
  align-items: center;

  img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}

.leftChaxun {
  background: #148958 !important;
  color: #fff !important;
}

.cardHeader {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  margin-bottom: 24px;
  display: flex;
  align-items: center;

  .cardHeader_icon {
    width: 16px;
    height: 16px;
  }
}

.centeet {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.color1 {
  color: #888888;
}

.inpts {
  width: 80px !important;
}

.tianjia {
  width: 380px;
  height: 156px;
  background: #f8f8f8;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .color {
    color: #888888;
  }

  .leftShoudong {
    background: #fff !important;
    border-color: #148958 !important;
    color: #148958 !important;
  }

  .marRight {
    margin-left: 16px;
  }
}

.tables {
  padding: 24px;
  background: #ffffff;
  border-radius: 3px;
  border: 1px solid #eeeeee;
  margin-top: 24px;
}

.top {
  background: #ffffff;
  border-radius: 3px;
  padding: 24px;
  flex: 1;
}

.marbton {
  margin-bottom: 24px;
}

.leftChaxun {
  background: #148958 !important;
  color: #fff !important;
}

.ant-btn:hover {
  border-color: #148958 !important;
  color: #148958 !important;
}

.leftChaxun:hover {
  background: #148958 !important;
  color: #fff !important;
}
</style>
